<template>
  <div class="shopcar-container">
    <van-swipe-cell v-for="item in cartList" :key="item.id">
      <div class="shopcart-box">
        <van-checkbox
          @click="checkedCell"
          v-model="item.checked"
          checked-color="#F63515"
          class="checked"
        ></van-checkbox>
        <div class="cell" @click="pushDetal">
          <img :src="item.imageHost + item.mainImage" alt="" />
          <div class="shopcart-item-info">
            <p class="shopcart-name">{{ item.name }}</p>
            <p class="shopcart-subtitle">{{ item.subtitle }}</p>
            <div class="shopcart-stepper">
              <span class="shopcart-price">￥ {{ item.price }}</span>
              <van-stepper
                v-model="item.count"
                @plus="handPlus(item)"
                @minus="handMinus(item)"
                input-width="25"
                button-size="25"
                min="1"
                max="15"
              />
            </div>
          </div>
        </div>
      </div>
      <template slot="right">
        <van-button
          square
          text="删除"
          type="danger"
          @click="delCartItem(item)"
          class="delete-button"
        />
      </template>
    </van-swipe-cell>
  </div>
</template>

<script>
// import { getCartList } from "@/api/api";
export default {
  props: {
    cartList: {
      type: Array,
    },
  },
  data() {
    return {
      checked: false,
      value: 1,
    };
  },
  methods: {
    // 购物车单选按钮 点击事件
    checkedCell() {
      // 点击之后 cartList 的 checked 值发生改变了
      // console.log("单选", this.cartList);
      this.$store.dispatch("changeChecked");
    },
    // 跳转详情页 点击事件
    pushDetal(e) {
      // 事件处理 过滤 步进器 事件
      if (e.target.className.indexOf("stepper") === -1) {
        console.log("跳转详情页面");
      }
    },
    // 删除数据
    delCartItem(item) {
      this.$emit("delcartitem", item);
    },
    // 加数量 点击事件
    handPlus(item) {
      // 参数 1 表示 加一
      this.$emit("changeCount", { productId: item.productId, count: 1 });
    },
    // 减数量 点击事件
    handMinus(item) {
      // 参数 1 表示 减一
      this.$emit("changeCount", { productId: item.productId, count: -1 });
    },
  },
};
</script>

<style lang="scss" scoped>
.shopcar-container {
  margin-top: 63px;

  .shopcart-box {
    display: flex;
    justify-content: space-between;
    background: #fff;
    padding: 10px;
    margin: 15px 0;
    box-sizing: border-box;

    .checked {
      width: 40px;
      text-align: center;
    }

    .cell {
      // flex: 1  表示占据 所有剩余 空间
      flex: 1;
      display: flex;
      align-items: center;
      background: #fff;
    }

    img {
      width: 115px;
      height: 115px;
      margin: 0 10px;
    }

    .shopcart-item-info {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width: 100%;
      height: 90%;

      .shopcart-name {
        font-size: 17px;
      }

      .shopcart-subtitle {
        font-size: 16px;
        color: #ccc;
      }

      .shopcart-stepper {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .shopcart-price {
          color: #f00;
          font-size: 21px;
        }
      }
    }
  }
}

.delete-button {
  height: 100%;
}
</style>